<template>
	<div class="ai_item">
		<div class="ai_item_user">
			<img @click="changeActive('aishow')" src="@/images/ai_item_usericon.png" class="ai_item_usericon">
			<div class="fictitious_detail_menuname on">飞飞·AI</div>
		</div>
		<div class="ai_item_drawer" v-show="activeMenu == 'aishow'">
			<div class="ai_item_drawer_cont">
				<div class="ai_item_drawer_title">
					<img src="@/images/ai_item_drawer_title1.png" class="ai_item_drawer_title1">
					<div class="ai_item_drawer_title2">
						<img src="@/images/ai_item_drawer_title3.png" class="ai_item_drawer_title3">
						<div class="ai_item_drawer_title4">想问啥，输入问题，我这就帮您解答！</div>
					</div>
				</div>
				<div class="ai_item_drawer_close like_btn" @click="changeActive('')">
					<i class="el-icon-close"></i>
				</div>
				<div class="ai_item_drawer_main beautifulScroll" ref="main">
					<template v-for="item in outinfo.messages">
						<div class="ai_lab_talk_item" :class="item.role == 'USER' ? 'right' : 'left'"
							v-show="item.hidden != 1">
							<div class="ai_talk_itemicon" v-if="item.role == 'USER'">
								<img :src="baseurl + userinfo.headPortraitUrl" v-if="userinfo.headPortraitUrl" />
								<img src="@/images/1.png" v-else />
							</div>
							<div class="ai_talk_itemicon" v-if="item.role != 'USER'">
								<img src="@/images/ai_lab_talk_itemicon.png" />
							</div>
							<div class="clearfix">
								<div class="ai_talk_itemcontusing" :class="item.role == 'USER' ? 'right' : 'left'"
									v-html="item.content">
								</div>
							</div>
							<div class="ai_talk_itemcontbtns" v-if="item.role == 'USER'">
								<div class="ai_talk_itemcontbtn using r" @click="openReCreate(item, true)">
									再试一次
								</div>
							</div>
						</div>
					</template>
					<div class="ai_lab_talk_item left" v-if="loading">
						<div class="ai_talk_itemicon">
							<img src="@/images/ai_lab_talk_itemicon.png" />
						</div>
						<div class="ai_talk_itemcontusing left"><i class="el-icon-loading"></i> </div>
					</div>
				</div>
				<div class="ai_item_drawer_input">
					<div>
						<input type="text" v-model="inputinfo" @keyup.enter="submitChatBefore"
							placeholder="请输入问题，我这就帮您解答！">
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getStorageToken } from '@/utils/auth'
import { selectStudentDetail } from "@/api/center.js"
import { apiChat, chatCompletions, aiQa } from '@/api/chat.js';
export default {
	name: 'headmain',
	data() {
		return {
			userinfo: {},
			activeMenu: '',
			outinfo: {
				messages: [],
				model: 'qwen2.5:7b',
				stream: false,
				title: '',
				chatId: '',
			},
			loading: false,
			inputinfo: '',
			outputing: '',
		}
	},
	created() {

	},

	mounted() {
		if (getStorageToken()) {
			this.getinfo();
		}
	},
	methods: {
		submitChatBefore() {
			if (this.loading) return
			this.submitChat();
		},
		openReCreate(item, flag) {
			if (this.loading) return
			this.inputinfo = item.content;
			this.submitChat();
		},
		submitChat() {
			var text = this.inputinfo;
			this.loading = true;
			if (!this.outinfo.title) {
				this.outinfo.title = this.inputinfo.substring(0, 15);
			}
			if (!this.outinfo.chatId) {
				this.outinfo.chatId = this.generateUUID()
			}
			if (this.outinfo.messages.length == 0) {
				let chatItemRole = {
					id: 1,
					content: '我是飞飞，由山东中飞科技研发的医学领域AI助手。我的知识体系基于循证医学框架构建，训练数据包含临床指南、权威文献及合规医疗信息',
					role: 'SYSTEM',
					hidden: 1,
				}
				this.outinfo.messages.push(chatItemRole);
			}
			if (this.inputinfo != '') {
				let chatItem = {
					id: String(this.outinfo.messages.length + 1),
					content: this.inputinfo,
					role: 'USER',
					hidden: 2,
				}
				this.outinfo.messages.push(chatItem);
				this.scrollbottom();
				this.inputinfo = '';
			}
			let ctrl = new AbortController() //重新赋值

			aiQa({ content: text }).then(res => {
				if (res.code == 200) {
					this.outputing = res.data
					this.stopChatInfo()
				} else {
					this.$message.error(res.message);
					this.scrollbottom();
					this.outputing = '';
					this.loading = false;
				}
			}).catch(error => {
				console.error('聊天链接出错', error);
			}).finally(() => {
				this.loading = false
			});
		},
		stopChatInfo() {
			if (this.outputing) {
				const chatItem = {
					id: String(this.outinfo.messages.length + 1),
					content: this.outputing,
					role: 'ASSISTANT',
					hidden: 2,
				}
				this.outinfo.messages.push(chatItem);
				this.scrollbottom();
				this.outputing = ''
			}
			this.loading = false
		},
		scrollbottom() {
			this.$nextTick(() => {
				if (this.$refs.main) {
					const { scrollHeight } = this.$refs.main;
					this.$refs.main.scrollTop = scrollHeight;
				}
			})
		},
		generateUUID() {
			let d = new Date().getTime();
			let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
				let r = (d + Math.random() * 16) % 16 | 0;
				d = Math.floor(d / 16);
				return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
			});
			return uuid;
		},
		changeActive(activeMenu) {
			if (this.activeMenu != activeMenu) {
				this.activeMenu = activeMenu;
			} else {
				this.activeMenu = '';
			}
		},
		getinfo() {
			selectStudentDetail().then(res => {
				if (res.code == '200') {
					this.userinfo = res.data;
				}
			})
		},
	},
}
</script>
<style>
.ai_item {
	cursor: initial;
	position: initial;
}

.ai_item_user {
	width: 70px;
	height: auto;
	position: fixed;
	right: 40px;
	bottom: 30px;
}

.fictitious_detail_menuname {
	color: #333;
}

.ai_item_usericon {
	margin: 0 auto;
	display: block;
	cursor: pointer;
	width: 70px;
}

.ai_item_drawer {
	width: 500px;
	height: 80%;
	position: fixed;
	bottom: 30px;
	right: 115px;
	background: url(../images/ai_item_drawerback.png) no-repeat;
	background-size: 100% 100%;
	border-radius: 10px;
	z-index: 1;
	overflow: hidden;
	box-shadow: inset 4px 2px 10px 0px #D0DFF1, 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.ai_item_drawer_title {
	position: relative;
	height: 110px;

}

.ai_item_drawer_close {
	position: absolute;
	right: 10px;
	top: 10px;
	width: 30px;
	height: 30px;
	background: #FFFEFE;
	border-radius: 50%;
	text-align: center;
	line-height: 30px;
	font-size: 16px;

}

.ai_item_drawer_title1 {
	float: left;
	width: 80px;
	margin: 0 10px 0 0;
}

.ai_item_drawer_title2 {
	float: left;
	width: calc(100% - 130px);
}

.ai_item_drawer_title3 {
	height: 20px;
	margin: 0 0 10px;
}

.ai_item_drawer_title4 {
	height: 16px;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 16px;
	color: #333333;
	line-height: 16px;
}

.ai_item_drawer_cont {
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	padding: 30px 25px 0 30px;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.ai_item_drawer_main {
	width: 100%;
	height: calc(100% - 200px);
	padding: 0 15px 0 0;
	border-radius: 10px;
	overflow: hidden;
	overflow-y: auto;
}

.ai_item_drawer_input {
	box-sizing: border-box;
	height: 80px;
	padding: 20px 0 15px;
	position: relative;


}

.ai_item_drawer_input>div {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	background: linear-gradient(270deg, #60D0B8 0%, #484FE4 25%, #484FE4 67%, #D658B2 100%);
	border-radius: 40px;
	overflow: hidden;
	padding: 4px;
}

.ai_item_drawer_input input {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	background: #FFFFFF;
	padding: 0 15px;
	border-radius: 40px;
	font-size: 14px;
}

.ai_lab_talk_item {
	width: 100%;
	height: auto;
	position: relative;
	margin: 0 0 20px;
	padding: 0 65px;
	box-sizing: border-box;



}

.ai_talk_itemicon {
	color: #2170F5;

}

.ai_talk_itemcontusing {
	padding: 16px 25px;
	background: #FFFEFE;
	border-radius: 10px;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 18px;
	color: #333333;
	line-height: 30px;
	margin: 0 0 12px;

}

.ai_lab_talk_item.left .ai_talk_itemicon {
	position: absolute;
	top: 0;
	left: 0;
	height: 55px;
	width: 55px;
	border-radius: 10px;
	overflow: hidden;
	background: #FFFFFF;
	border-radius: 50%;
}

.ai_lab_talk_item.right .ai_talk_itemicon {
	position: absolute;
	top: 0;
	right: 0;
	height: 55px;
	width: 55px;
	border-radius: 10px;
	overflow: hidden;
	border-radius: 50%;
}

.ai_lab_talk_item.right .ai_talk_itemcontusing {
	float: right;
}


.ai_talk_itemcontbtns {
	height: 31px;
	width: 100%;
}

.ai_talk_itemcontbtn {
	width: auto;
	padding: 0 10px;
	height: 31px;
	border-radius: 6px 6px 6px 6px;
	cursor: pointer;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 16px;
	color: #FFFFFF;
	line-height: 31px;
	display: inline-block;
}

.ai_talk_itemcontbtn.using {
	color: #333;
}

.ai_talk_itemcontbtn:hover {
	background: #8591c7;
	color: #FFFFFF;
}
</style>